<template>
  <el-card class="main-card">
    <div class="title">{{ this.$route.name }}</div>
    <!-- 表格操作 -->
    <div class="operation-container">

      <div style="margin-left:auto">

        <!--        <el-select
                  clearable
                  v-model="loginType"
                  placeholder="请选择登录方式"
                  size="small"
                  style="margin-right:1rem"
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.type"
                    :label="item.desc"
                    :value="item.type"
                  />
                </el-select>
                <el-input
                  v-model="keywords"
                  prefix-icon="el-icon-search"
                  size="small"
                  placeholder="请输入昵称"
                  style="width:200px"
                  @keyup.enter.native="searchUsers"
                />
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-search"
                  style="margin-left:1rem"
                  @click="searchUsers"
                >
                  搜索
                </el-button>-->
      </div>
    </div>
    <!-- 表格展示 -->
    <el-table border :data="hospitalList" v-loading="loading">
      <!-- 表格列 -->
      <el-table-column
          prop="cover"
          label="医院缩略图"
          align="center"
          width="150"
      >
        <template slot-scope="scope">
          <img :src="scope.row.cover" width="80" height="80"/>
        </template>
      </el-table-column>
      <el-table-column
          prop="hospitalName"
          label="医院名称"
          align="center"
          width="200"
      />
      <el-table-column
          prop="level"
          label="等级"
          align="center"
          width="100"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.level }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="location"
          label="位置"
          align="center"
          width="160">
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right:5px"/>
          {{ scope.row.location }}
        </template>
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话"
          align="center"
          width="160">
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right:5px"/>
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column
          prop="website"
          label="网站"
          align="center"
          width="226">
        <template slot-scope="scope">
          <el-link icon="el-icon-s-help" :href="scope.row.website" type="primary" target="_blank">
            {{ scope.row.website }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
          prop="introduction"
          label="简介"
          align="center"
          width="400"
          show-overflow-tooltip
      />
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="130"
          align="center"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right:5px"/>
          {{ scope.row.createTime | date }}
        </template>
      </el-table-column>
      <!-- 列操作 -->
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button
              type="primary"
              size="mini"
              @click="openEditModel(scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!--    <el-pagination-->
    <!--        class="pagination-container"-->
    <!--        background-->

    <!--        :current-page="current"-->
    <!--        :page-size="size"-->
    <!--        :total="count"-->
    <!--        :page-sizes="[10, 20]"-->
    <!--        layout="total, sizes, prev, pager, next, jumper"-->
    <!--    />-->
    <!--    @size-change="sizeChange"
        @current-change="currentChange"-->
    <!-- 修改对话框 -->
    <el-dialog :visible.sync="isEdit" width="30%">
      <div class="dialog-title-container" slot="title">
        修改医院
      </div>
      <el-form label-width="80px" size="medium" :model="hospitalForm">
        <el-form-item label="缩略图">
          <el-upload
              class="avatar-uploader"
              action="/api/admin/hospital/cover"
              :show-file-list="false"
              :on-success="updateAvatar"
              :headers="headers"
          >
            <el-avatar :size="80" v-if="hospitalForm.cover" :src="hospitalForm.cover" shape="circle"></el-avatar>
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>
        <el-form-item label="医院名称" required>
          <el-input v-model="hospitalForm.hospitalName" style="width:300px"/>
        </el-form-item>
        <el-form-item label="等级" required>
          <el-select v-model="hospitalForm.level" placeholder="请选择" style="width: 300px">
            <el-option
                v-for="item in levelList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="位置" required>
          <el-input v-model="hospitalForm.location" style="width:300px"/>
        </el-form-item>
        <el-form-item label="电话" required>
          <el-input v-model="hospitalForm.phone" style="width:300px"/>
        </el-form-item>
        <el-form-item label="网站">
          <el-input v-model="hospitalForm.website" style="width:300px"/>
        </el-form-item>
        <el-form-item label="简介" required>
          <el-input v-model="hospitalForm.introduction" style="width:300px" type="textarea" :rows="6"
                    maxlength="2048"
                    show-word-limit />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="isEdit = false">取 消</el-button>
        <el-button type="primary" @click="editHospital">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  created() {
    this.listHospitals();
  },
  data: function () {
    return {
      headers: this.$store.state.headers,
      hospitalForm: {
        id: "",
        cover: "",
        hospitalName: "",
        level: "",
        location: "",
        phone: "",
        website: "",
        introduction: ""
      },
      hospitalList: [],
      levelList: [{value: "三级甲等", label: "三级甲等"}, {value: "二级甲等", label: "二级甲等"}, {value: "一级甲等", label: "一级甲等"},
        {value: "三级乙等", label: "三级乙等"}, {value: "二级乙等", label: "二级乙等"}, {value: "一级乙等", label: "一级乙等"},
        {value: "三级丙等", label: "三级丙等"}, {value: "二级丙等", label: "二级丙等"}, {value: "一级丙等", label: "一级丙等"},],
      current: 1,
      size: 10,
      count: 0,
      // 以下控制组件开关属性
      loading: true,
      isEdit: false,
    };
  },
  methods: {
    updateAvatar(response) {
      if (response.flag) {
        this.$message.success(response.message);
        this.hospitalForm.cover = response.data;
        //this.$store.commit("updateAvatar", response.data);
      } else {
        this.$message.error(response.message);
      }
    },
    // searchUsers() {
    //   this.current = 1;
    //   this.listUsers();
    // },
    // sizeChange(size) {
    //   this.size = size;
    //   this.listUsers();
    // },
    // currentChange(current) {
    //   this.current = current;
    //   this.listUsers();
    // },
    openEditModel(hospital) {
      this.hospitalForm = JSON.parse(JSON.stringify(hospital));
      this.isEdit = true;
    },
    editHospital() {
      this.axios
          .put("/api/admin/updateHospital", this.hospitalForm)
          .then(({data}) => {
            if (data.flag) {
              this.$notify.success({
                title: "成功",
                message: data.message
              });
              this.listHospitals();
            } else {
              this.$notify.error({
                title: "失败",
                message: data.message
              });
            }
            this.isEdit = false;
          });
    },
    listHospitals() {
      this.axios
          .get("/api/admin/hospitals", {
            params: {
              current: this.current,
              size: this.size
            }
          })
          .then(({data}) => {
            this.hospitalList = data.data.recordList;
            //this.hospitalForm.cover = this.hospitalList[0].cover;
            this.count = data.data.count;
            this.loading = false;
          });
    },
  }
};
</script>
